import React, { Component } from 'react';
import { Card } 			from 'antd';
import Mutil 				from '../../util/mm.js';
import Order 				from '../../server/order.js';
import TableList            from '../../util/table-list';

const _mm = new Mutil();
const _order = new Order();
class OrderDetail extends Component{
	constructor(props){
		super(props);
		this.state={
			orderNumer: this.props.match.params.orderNumer,
			orderInfo: ''
		}
	}
	componentDidMount(){
		this.loadOrder();
	}
	loadOrder(){
			_order.getOrderDetail(this.state.orderNumer).then((res) => {
				this.setState({
					orderInfo: res
				});
			}, (errMsg) => {
				_mm.errorTips(errMsg);
			})
	}

	//发货操作
	onSendGoods(){
		if(window.confim('是否确认已经发货？')){
			_order.sendGoods(this.state.orderNumer).then((res)=>{
				_mm.successTips('热火成功');
				this.loadOrder()
			}, errMsg => {
				_mm.errorTips(errMsg);
			})
		}
	}
	
	render(){
		let receiverInfo = this.state.orderInfo.shippingVo || {},
			productList = this.state.orderInfo.orderItemVoList || [];
		return(
				<Card title="订单详情">
					<div className="form-horizontal">
					  <div className="form-group">
					    <label className="col-md-2 control-label">订单号</label>
					    <div className="col-md-6">
					      <p className="form-control-static">{this.state.orderInfo.orderNo}</p>
					    </div>
					  </div>
					  <div className="form-group">
					    <label className="col-md-2 control-label">创建时间</label>
					    <div className="col-md-6">
					      <p className="form-control-static">{this.state.orderInfo.createTime}</p>
					    </div>
					  </div>
					  <div className="form-group">
					    <label className="col-md-2 control-label">收件人</label>
					    <div className="col-md-6">
					      <p className="form-control-static">
					      	{receiverInfo.receiverName}
					      	{receiverInfo.receiverProvince}
					      	{receiverInfo.receiverCity}
					      	{receiverInfo.receiverAddress}
					      	{receiverInfo.receiverMobile || receiverInfo.receiverPhone}
					      </p>
					    </div>
					  </div>
					  <div className="form-group">
					    <label className="col-md-2 control-label">订单状态</label>
					    <div className="col-md-6">
					      <p className="form-control-static">
					      	{this.state.orderInfo.statueDesc}
					      	{
					      		this.state.orderInfo.status===20
					      		? <button 
					      			className="btn btn-default btn-sm"
					      			onClick={(e) => this.onSendGoods(e)}
					      			>立即发货</button>
					      		: null
					      	}
					      </p>
					    </div>
					  </div>
					  <div className="form-group">
					    <label className="col-md-2 control-label">支付方式</label>
					    <div className="col-md-6">
					      <p className="form-control-static">
					      	{this.state.orderInfo.paymentTypeDesc}
					      </p>
					    </div>
					  </div>
						<div className="form-group">
						    <label className="col-md-2 control-label">订单金额</label>
							    <div className="col-md-6">
							      <p className="form-control-static">
							      	￥{this.state.orderInfo.payment}
							      </p>
							    </div>
					  	</div>
					  	<div className="form-group">
						    <label className="col-md-2 control-label">商品列表</label>
							    <div className="col-md-10">
							      <TableList tableHeads = {['商品图片','商品信息','单价','数量','合计']}>
									{productList.map((product, index)=>{
										return(
											<tr key={index}>
												<td>
													<img className="p-img" src={`${this.state.orderInfo.imageHost}${product.productImage}`} 
															alt={product.productName}/>
												</td>
												<td>{product.productName}</td>
												<td>{product.currentUnitPrice}</td>
												<td>￥{product.quantity}</td>
												<td>{product.totalPrice}</td>
											</tr>
											);
										})}
										</TableList>
							</div>
						</div>
				</div>

			</Card>

		);
	}
}

export default OrderDetail;